import React, { createRef } from 'react';
import { connect } from 'react-redux';

// 映射state到当前组件的props上
const mapStateToProps = (state) => ({
    list: state.list
});

const mapDispatchToProps = (dispatch) => ({
    deleteData: (index) => {
        dispatch({
            type: 'REMOVE_DATA',
            task: index
        });
    }
});

// 这个方法的返回值是个高阶组件
// connect(mapStateToProps)

@connect(mapStateToProps, mapDispatchToProps)
class List extends React.Component {
    myRef = createRef()

    handleRemove = (idx) => {
        this.props.deleteData(idx);
    }

    render () {
        console.log(this.props);
        return (
            <div>
                <ul>
                    {
                        this.props.list.map((value, idx) => (
                            <li key={idx}>
                                {value}
                                <button onClick={() => this.handleRemove(idx)}>x</button>
                            </li>
                        ))
                    }
                </ul>
                <input ref={this.myRef} />
            </div>
        );
    }

    componentDidMount () {
        const { current } = this.myRef;
        current.focus();
    }
}
// export default connect(mapStateToProps)(List)
export default List;
